<template>
  <div id="menu_id">
    <div id="menu_id_title">
      <p>
        <span>注：1.增加的新栏目为当前栏目下一行</span><br />
        <span>2.修改完的栏目一行需保存后提交审批才能生效</span>
      </p>
      <el-button size="mini" type="success" round @click="openPanel"
        >添加</el-button
      >
    </div>
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="title" label="栏目名称"></el-table-column>
      <el-table-column prop="icon" label="栏目图标"></el-table-column>
      <el-table-column prop="url" label="栏目地址"></el-table-column>
      <el-table-column prop="status" label="状态" v-slot="$props">
        <template>
          <el-button
            v-if="$props.row.status === 0"
            size="mini"
            type="danger"
            plain
            round
            >已禁用</el-button>
          <el-button
            v-else-if="$props.row.status === 1"
            size="mini"
            type="success"
            plain
            round
            >已启用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button size="mini" type="primary" round>修改</el-button>
        <el-button size="mini" type="danger" round>删除</el-button>
      </el-table-column>
    </el-table>

    <addMenu
      :isShow="isShow"
      :menuList="menuList"
      @reload_list="reload_list"
    ></addMenu>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import addMenu from "../components/addMenu.vue";

export default {
  data() {
    return {
      isShow: { flag: false },
    };
  },
  created() {
    this.menuListAction();
  },
  methods: {
    openPanel() {
      this.isShow.flag = true;
    },
    reload_list() {
      this.menuListAction();
    },
    ...mapActions("MenuStore", ["menuListAction"]),
  },
  computed: {
    ...mapState({ menuList: (state) => state.MenuStore.menuList }),
  },
  components: {
    addMenu,
  },
};
</script>

<style>
#menu_id_title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#menu_id_title p {
  font-size: 12px;
  color: #b0b0b0;
  text-align: left;
}
#menu_id_title p span:nth-of-type(2) {
  display: inline-block;
  text-indent: 2em;
}
</style>